<template>
  <div>
    <h3>事件对象</h3>
    <p>msg:{{msg}}</p>
    <!-- 1.绑定事件 v-on:click="clickme函数名/函数名()" -->
    <button v-on:click="clickme">你敢点我试试</button>
    <button v-on:click="clickme()">你敢点我试试</button>
    <hr>
    <!-- 2.查看this指向 -->
    <button @click="getThis()">查看this指向</button>
    <br><br>
    <!-- 功能：显示隐藏 -->
    <button @click="change()">切换显示</button>
    <div class='box' v-show="flag">xxx-显示或者隐藏</div>
    <hr>
    <!-- 3.事件传递参数 -->
    <button @click="sendData(1,2,3)">传递参数</button>
    <hr>
    <!-- 4.事件对象event 
        （1）无参函数 @click="noParams函数不要加括号" 定义函数第一个参数就是事件对象event
        （1）有参函数 @click="params(1,2,$event)" 
    -->
    <button @click="noParams">无参函数</button>
    <button @click="noParams($event)">无参函数</button>
    <button @click="params(1,$event,2)">有参函数</button>
  </div>
</template>

<script>
export default {
  // 数据
  data() {
    return {
      msg: "hello",
      flag: true,
    };
  },
  // 方法
  methods: {
      clickme(){
          console.log("点你咋地");
      },
      getThis(){
          console.log('this--',this);//this指向当前组件实例
          console.log(this.msg);
          this.clickme();
          // 修改msg
          this.msg="我的天呢";
      },
      change(){
          this.flag=!this.flag;
      },
      sendData(a,b,c){
          console.log(a,b,c);
      },
      noParams(e){
          console.log('无参函数',e);
      },
      params(a,b,e){
          console.log(a,b,e);
      }
  },
};
</script>

<style>
</style>